<template>
  <div class="box">
    <div class="bacag"></div>
    <div class="top">
      <van-row>
        <van-col span="12" class="qisjname">企业数据档案</van-col>
        <van-col span="11" class="icons">
          <van-icon name="scan" size="30px" color="#fff" @click="saoma" />
          <van-icon name="qr" size="30px" color="#fff" @click="ewm" />
          <van-icon name="chat-o" size="30px" color="#fff" @click="xinx" />
          <van-icon name="ellipsis" size="30px" color="#fff" @click="qt" />
        </van-col>
      </van-row>
      <van-overlay :show="show" @click="qxzzc">
        <div class="wrapper">
          <div class="block">
            <van-field v-model="illustrate" left-icon="info" readonly @click="qttza" />
            <van-field v-model="privacy" left-icon="description" readonly @click="ysxy" />
          </div>
        </div>
      </van-overlay>
    </div>
    <div class="qyxx">
      <div class="etname eta" v-for="(item,index) in qygrxx" :key="index">{{item.name}}</div>
    </div>
    <div class="gongge">
      <van-grid :border="false">
        <van-grid-item v-for="(item,index) in grid" :key="index" :icon="item.icon" :icon-color="item.color"
          :text="item.text" @click="certificate(index)" />
      </van-grid>
    </div>
    <div class="list">
      <div class="lists" v-for="(item,index) in xfx" :key="index" @click="provelist(index)">
        <div class="lefticon">
          <van-icon name="chat-o" size="50px" />
        </div>
        <div class="rigthnr">
          <li>{{item.name}}</li>
          <li>{{item.blurb}}</li>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
  import {
    ref
  } from 'vue';
  import {
    useRouter
  } from 'vue-router'
  const $router = useRouter()
  const show = ref(false);
  const illustrate = ref('使用说明')
  const privacy = ref('隐私协议')
  const qygrxx = [{
      id: "001",
      name: "企业名称",
    },
    {
      id: "002",
      name: "企业法人",
    },
    {
      id: "003",
      name: "企业信用代码",
    },
  ]
  const grid = [{
      icon: "notes",
      text: "企业证照",
      color: "rgb(109 173 222)",
    },
    {
      icon: "cluster",
      text: "企业架构",
      color: "rgb(109 173 222)",
    },
    {
      icon: "column",
      text: "企业介绍",
      color: "rgb(109 173 222)",
    },
    {
      icon: "records",
      text: "企业主营",
      color: "rgb(109 173 222)",
    },
  ]
  const xfx = [{
      icon: "",
      name: "名称",
      blurb: "此模块简介"
    },
    {
      icon: "",
      name: "名称",
      blurb: "此模块简介"
    },
  ]

  const saoma = () => {
    console.log("扫码");
    lightAppJssdk.device.scan({
      success: function (data) {
        //成功回调
        console.log("扫成功");
      },
      fail: function (data) {
        //错误返回
      }
    });

  }
  const ewm = () => {
    console.log("二维码展示");
  }
  const xinx = () => {
    console.log("消息");
  }
  const qt = () => {
    show.value = true
  }
  const qttza = () => {
    $router.push('/illustrate')
  }
  const ysxy = () => {
    $router.push('/privacy')
  }
  const qxzzc = () => {
    show.value = false
  }
  const certificate = (index) => {
    $router.push({
      path: '/certificate',
      query: {
        index: index
      }
    })
  }
  const provelist = (index) => {
    console.log(index);
  }
</script>

<style lang="scss" scoped>
  .box {
    background-color: rgb(243, 243, 243);
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;

    .bacag {
      position: absolute;
      width: 100%;
      height: 44%;
      background-color: rgb(125, 195, 249);
      border-radius: 0px 0px 67px 67px;
    }
  }

  .top {
    // border: solid 1px chocolate;
    padding: 10px 0 10px 0;

    .qisjname {
      position: relative;
      display: flex;
      font-size: 22px;
      margin-left: 8px;
      color: #fff;
    }

    .icons {
      // margin: 0 4px 0 4px;
      display: flex;
      justify-content: space-between;
    }

    .wrapper {
      width: 100px;
      height: 60px;
      // background: #ffffff;
      margin-top: 12%;
      margin-left: 66%;
      position: relative;
      float: left;
      border-radius: 10px;
    }

    .wrapper::before {
      content: "";
      width: 0px;
      height: 0px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #ffffff;
      position: absolute;
      top: -10px;
      left: 85px;
    }

    .block {
      width: 120px;
      height: 80px;
      background-color: #fff;
    }
  }

  .qyxx {
    width: 90%;
    height: 105px;
    position: relative;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;

    .etname {
      font-weight: 650;
      font-size: 17px;
    }

    .eta {
      padding-bottom: 1px;
      display: flex;
      align-items: center;
      margin-left: 5%;
      height: 33.3333%;
    }
  }

  .gongge {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
  }

  .list {
    width: 90%;
    margin: 0 auto;

    .lists {
      display: flex;
      // width: 100%;
      position: relative;
      height: 50px;
      margin-top: 10px;
      padding: 5px 5px 5px 5px;
      background-color: #ffffff;

      .lefticon {
        width: 50px;
        height: 50px;
        border-radius: 30px;
      }

      .rigthnr {
        line-height: 26px;
        margin-left: 10px;

        li {
          list-style: none;
        }
      }
    }
  }
</style>